<template>
  <div class="overviewv">
    <h4>全国疫情信息概览</h4>
    <div class="e-overview" ref="myEchartOverview"></div>
    <ul class="note">
      <li>
        <span>病毒名称:</span>
        <span>{{ overAll.note1 }}</span>
      </li>
      <li>
        <span>传染源:</span>
        <span>{{ overAll.note2 }}</span>
      </li>
      <li>
        <span>传播途径:</span>
        <span>{{ overAll.note3 }}</span>
      </li>
    </ul>
    <p class="time">
      更新时间&nbsp;&nbsp;&nbsp;&nbsp;{{ dateFilter(overAll.updateTime) }}
    </p>
  </div>
</template>

<script>
import echarts from "echarts";
import { dateFilter } from "@/utils/utils";
export default {
  name: "Overview",
  data() {
    return {
      dateFilter: dateFilter
    };
  },
  mounted() {
    this.renderOverview(this.overAll);
  },
  methods: {
    renderOverview() {
      let myChart = echarts.init(this.$refs.myEchartOverview); //这里是为了获得容器所在位置
      myChart.setOption({
        dataset: {
          source: [
            ["product", "amount"],
            ["现存确诊", this.overAll.currentConfirmedCount],
            ["累计确诊", this.overAll.confirmedCount],
            ["疑似感染", this.overAll.suspectedCount],
            ["治愈人数", this.overAll.curedCount],
            ["死亡人数", this.overAll.deadCount],
            ["重症病例", this.overAll.seriousCount]
          ]
        },
        grid: {
          containLabel: true,
          top: "4%",
          left: "2%",
          right: "2%",
          bottom: "0%"
        },
        xAxis: {
          name: "amount",
          show: false,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          splitLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff"
            }
          }
        },
        visualMap: {
          show: false,
          orient: "horizontal",
          realtime: true,
          left: "center",
          min: 0,
          max: this.overAll.confirmedCount,
          color: ["#9e002d", "#ffe7e2"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 20,
            barCategoryGap: "10%",
            encode: {
              x: "amount",
              y: "product"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: {
                  color: "white"
                }
              }
            },
            itemStyle: {
              color: "#ffffff"
            }
          }
        ]
      });
    }
  },
  props: {
    overAll: Object
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.overviewv {
  height: 100%;
  padding: 20px;
  color: #cecece;
  box-sizing: border-box;
  text-align: left;
  .e-overview {
    height: 54%;
  }
  .note {
    font-size: 12px;
    li {
      margin-bottom: 2px;
      list-style: none;
    }
  }
  .time {
    font-size: 12px;
    color: #929292;
    text-align: right;
  }
}
</style>
